<template>
	<view class="container">
		<view v-if="isViewType==1" class="lawyer">
			<view @click="testClick" class="navTitle" :style="{ marginTop: `${statusBarHeight}px`}">
				办公
			</view>
			<view @click="lawyerUserInfoClick" class="flex-row-center" style="margin-top: 30rpx;margin-left: 24rpx;z-index: 999;">
				<image class="headerIcon">
				</image>
				<view class="" style="margin-left: 24rpx;width: 500rpx;">
					<view class="lawyerName">
						王莉莉
					</view>
					<view class="department">
						所属律所:强盛律所
					</view>
				</view>
				<image class="mine_whitearrow" src="/static/my/mine_whitearrow.png">
				</image>
			</view>
			<view class="validtime flex-row-space-between">
				<view class="validtime1">
					免费到期时间：2024-09.06
				</view>
				<view class="validtime2" @click="lawyerVipPayClick">
					立即续费
				</view>
			</view>
			<view class="bgView">
			</view>
		</view>
		<view v-if="isViewType==2" class="lawOffice">
			<view class="lawOfficeHeader">
				<view @click="testClick" class="navTitle" :style="{ marginTop: `${statusBarHeight}px`}">
					个人中心
				</view>
				<view class="flex-row-center" style="margin-top: 30rpx;margin-left: 24rpx;z-index: 999;">
					<image class="headerIcon">
					</image>
					<view class="" style="margin-left: 24rpx;width: 500rpx;">
						<view class="lawyerName">
							济南强盛律所
						</view>
						<!-- <view class="department">
							所属律所:强盛律所
						</view> -->
					</view>
					<image class="mine_whitearrow" src="/static/my/mine_whitearrow.png">
					</image>
				</view>
			</view>
			<view class="validtimeLS flex-row-space-between">
				<view class="validtime1LS">
					免费到期时间：2024-09.06
				</view>
				<view class="validtime2LS">
					立即续费
				</view>
			</view>
		</view>
		<view v-if="isViewType==1" class="listView">
			<view @click="listItemClick(item,index)" class="listViewItem flex-row-space-between" v-for="(item,index) in lawyerMineBottomList" :key="index">
				<view class="listViewItem1 flex-row-flex-start">
					<image class="listViewItemIcon" :src="item.icon">
					</image>
					<view class="listViewItemname">
						{{item.name}}
					</view>
				</view>
				<image class="mine_blackarrow" src="/static/my/mine_blackarrow.png">
				</image>
			</view>
		</view>
		<view v-if="isViewType==2" class="listView">
			<view @click="listItemClick(item,index)" class="listViewItem flex-row-space-between" v-for="(item,index) in lawOfficeMineBottomList" :key="index">
				<view class="listViewItem1 flex-row-flex-start">
					<image class="listViewItemIcon" :src="item.icon">
					</image>
					<view class="listViewItemname">
						{{item.name}}
					</view>
				</view>
				<image class="mine_blackarrow" src="/static/my/mine_blackarrow.png">
				</image>
			</view>
		</view>
		<u-popup :round="10" mode="center" bgColor="transparent" closeOnClickOverlay="true" :show="isShowLawyerVip" @close="closeIsShowLawyerVipClick">
			<view class="lawyerVipView">
				<view class="lawyerVipHeaderView flex-row-flex-end">
					<view class="lawyerVipTitle">
						选择续费时间
					</view>
					<image @click="closeIsShowLawyerVipClick" class="lawyerVipRemove" src="/static/vip_remove.png">
				</view>
				<scroll-view class="vipUnitList" scroll-x="true">
					<view @click="vipUnitListItemChooseClick(index)" class="vipUnitListItem" v-for="index in 5" :key="index" :style="vipUnitListItemChooseIndex==index?'border: 2rpx solid;border-image: linear-gradient(136deg, rgba(233, 53, 72, 1), rgba(243, 91, 67, 1)) 2 2;':'border: 2rpx solid #FDF1F2;'">
						<view class="flex-column-center" style="width: 306rpx;height: 200rpx;">
							<view class="duration">
								一个月
							</view>
							<view class="vipMoney">
								￥10
							</view>
						</view>
					</view>
				</scroll-view>
				<view @click="loginMobile()" class="loginButton">
					提交认证
				</view>
		    </view> 
		</u-popup>
	</view>
</template>

<script>
	import RequestURL from "@/Network/RequestURL/RequestURL.js"
	import BaseData from "@/Network/RequestURL/baseData.js"
	
	export default {
		data() {
			return {
				isViewType: 1,//可以默认0   1律师端   2律所端
				statusBarHeight: '',
				barHeight: '',
				
				userInfoDic:{},
				/*-----------以上--公共数据---------*/
				lawyerMineBottomList: BaseData.lawyerMineBottomList,
				isShowLawyerVip:false,
				vipUnitListItemChooseIndex:0,
				/*-----------以上--律师端---------*/
				/*-----------以下--律所端---------*/
				lawOfficeMineBottomList: BaseData.lawOfficeMineBottomList,
			}
		},
		onShow() {
			// isViewType //可以默认0   1律师端   2律所端
			let sysInfo = uni.getSystemInfoSync()
			console.log('sysInfo--------',sysInfo)
			// 状态栏高度
			this.statusBarHeight = sysInfo.statusBarHeight; 
			// 胶囊数据
			const { top, height } = wx.getMenuButtonBoundingClientRect();
			// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
			
			
			let token = uni.getStorageSync('token')
			if (token) {
				this.getUserInfoData()
			}
		},
		methods: {
			testClick(){
				this.isViewType = this.isViewType==1?2:1;
			},
			
			async getUserInfoData(){
				let param = {
					'url': 'api/user/get_userinfo',
					'data': {},
					'method': 'POST'
				}
				uni.showLoading({})
				this.$myRequest(param).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.userInfoDic = res.data
					}
				})
			},
			
			lawyerVipPayClick(){
				this.isShowLawyerVip = true
			},
			closeIsShowLawyerVipClick(){
				this.isShowLawyerVip = false
			},
			vipUnitListItemChooseClick(index){
				this.vipUnitListItemChooseIndex = index
			},
			lawyerUserInfoClick(){
				uni.navigateTo({
					url:'/pageB/userInfo/userInfo'
				})
			},
			listItemClick(item){
				switch (item.name){
					case '切换':
					{
						
					}
						break;
					case '发票管理':
					{
						uni.navigateTo({
							url:'/pageB/FaPiaoManager/FaPiaoManager'
						})
					}
						break;
					case '隐私政策':
					{
						uni.navigateTo({
							url:'/pages/htmlString/htmlString'
						})
					}
						break;
					case '用户协议':
					{
						
					}
						break;
					case '关于我们':
					{
						
					}
						break;
					case '联系我们':
					{
						
					}
						break;
					default:
						break;
				}
			}
			/*-----------以上--律师端---------*/
			/*-----------以下--律所端---------*/
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.loginButton {
		margin-top: 40rpx;
		margin-left: 24rpx;
		width: 620rpx;
		height: 90rpx;
		background: linear-gradient( to bottom, #E93548 0%, #F35B43 100%);
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(235,43,59,0.4);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
	}
	.duration{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}
	.vipMoney{
		margin-top: 18rpx;
		font-family: DIN, DIN;
		font-weight: bold;
		font-size: 52rpx;
		color: #EB2B3B;
	}
	.vipUnitListItem{
		display: inline-block;
		margin-left: 24rpx;
		width: 306rpx;
		height: 200rpx;
		background: #FDF1F2;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}
	.vipUnitList{
		padding-left: 24rpx;
		width: 600rpx;
		white-space: nowrap;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.lawyerVipView{
		padding-bottom: 30rpx;
		width: 674rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}
	.lawyerVipHeaderView{
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}
	.lawyerVipTitle{
		width: 640rpx;
		text-align: center;
	}
	.lawyerVipRemove{
		margin-right: 24rpx;
		width: 31rpx;
		height: 31rpx;
	}
	.validtime1LS{
		margin-left: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.validtime2LS{
		margin-right: 28rpx;
		width: 192rpx;
		height: 70rpx;
		background: #FFE8E9;
		border-radius: 35rpx 35rpx 35rpx 35rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #E93548;
		line-height: 70rpx;
		text-align: center;
	}
	.validtimeLS{
		z-index: 999;
		margin-left: 24rpx;
		width: 702rpx;
		height: 140rpx;
		background: linear-gradient( 136deg, #E93548 0%, #F35B43 100%);
		box-shadow: 0rpx 2rpx 19rpx 0rpx rgba(233,53,72,0.45);
		border-radius: 10rpx 10rpx 0rpx 0rpx;
	}
	.lawOffice{
		width: 750rpx;
		height: 587rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: end;
	}
	.lawOfficeHeader{
		width: 750rpx;
		height: 417rpx;
		background: linear-gradient( 136deg, #E93548 0%, #F35B43 100%);
	}
	.mine_blackarrow{
		width: 24rpx;
		height: 30rpx;
	}
	.listViewItemname{
		margin-left: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}
	.listViewItemIcon{
		width: 52rpx;
		height: 52rpx;
	}
	.listViewItem{
		padding-top: 23rpx;
		padding-bottom: 23rpx;
	}
	.listView{
		margin-top: 39rpx;
		margin-left: 24rpx;
		width: 702rpx;
	}
	.bgView{
		width: 845rpx;
		height: 846rpx;
		background-color: rgba(233,57,71, 0.4);
		border-radius: 423rpx;
		position: fixed;
		left: -148rpx;
		top: -296rpx;
	}
	.lawyer{
		width: 750rpx;
		height: 576rpx;
		background: linear-gradient( to bottom, #E93548 0%, #F35B43 100%);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: end;
	}
	.validtime1{
		margin-left: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.validtime2{
		margin-right: 28rpx;
		width: 192rpx;
		height: 70rpx;
		background: linear-gradient( to bottom, #E93548 0%, #F35B43 100%);
		border-radius: 35rpx 35rpx 35rpx 35rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 70rpx;
		text-align: center;
	}
	.validtime{
		z-index: 999;
		margin-left: 24rpx;
		width: 702rpx;
		height: 140rpx;
		background: linear-gradient( 360deg, #4D4C55 0%, #43454B 100%);
		border-radius: 10rpx 10rpx 0rpx 0rpx;
	}
	.department{
		margin-top: 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.lawyerName{
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.mine_whitearrow{
		margin-left: 28rpx;
		width: 36rpx;
		height: 36rpx;
	}
	.headerIcon{
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		border: 2rpx solid rgba(255,255,255,0.4);
	}
	.navTitle{
		z-index: 999;
		width: 750rpx;
		height: 88rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}
</style>